<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Element Example</title>
  <!-- import Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- import Element -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!--http 请求-->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <el-container>
    <el-header>
      <div>
        <div style="width:20%; float:left">
          <el-input placeholder="根节点id:" v-model="request.rootId" style="float:left;width: 80%;"></el-input>
        </div>
        <div style="width:20% ;float: left">
          <el-input placeholder="表名称:" v-model="request.tableName" style="float:left;;width: 80%;"></el-input>
        </div>
        <div style="width:20%;float:left">
          <el-input placeholder="节点表字段名称:" v-model="request.nodeColName" style="float:left;width: 80%;"></el-input>
        </div>
        <div style="width:20%;float:left">
          <el-input placeholder="节点表字段父名称:" v-model="request.parentNodeColName"
                    style="float:left;width: 80%"></el-input>
        </div>
        <div style="width:20%;float:left">
          <el-input placeholder="节点展示名称字段:" v-model="request.nodeNameColName" style="float:left;width: 80%"></el-input>
        </div>
        <div style="width:20%;float:left">
          <el-button @click="generator">生成</el-button>

        </div>
      </div>
      <div>
        <div style="width:50%;float:left">
          <el-input placeholder="数据库连接:" v-model="request.url" style="float:left;width: 95%"></el-input>
        </div>
        <div style="width:10%;float:left">
          <el-input placeholder="用户名:" v-model="request.userName" style="float:left;width: 80%"></el-input>
        </div>
        <div style="width:10%;float:left">
          <el-input placeholder="密码:" v-model="request.password" style="float:left;width: 80%"></el-input>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-tree :data="tree" :props="defaultProps" node-key=“id”  @node-click="handleTreeNodeClick"></el-tree>
    </el-main>
  </el-container>
</div>
<script>
  new Vue({
    el: '#app',
    methods: {
      showMessage() {
        this.$message('Hello World!');
      },

      handleTreeNodeClick(data, node, elem){
        this.$message(data.data);
      },
      generator() {
        let _this=this;
        axios.post('/getTreeEntity', this.request)
            .then(function (response) {
              _this.tree=[]
              _this.tree[0]=response.data
            })
            .catch(function (error) {

            });
      }
    },
    data: {
      tree: [
          {
        'name': '父节点',
        'children': [
          {
            'name': '子节点'
          }
        ]
      }],
      defaultProps: {
        children: 'children', //指定子树为节点对象的某个属性值--选择一个对象作为子节点使用
        label: 'name' //指定节点标签为节点对象的某个属性值--选择一个值作为label显示
      },
      request: {
        rootId: 1,
        nodeColName: "id",
        parentNodeColName: "parent_id",
        tableName: "test",
        url: "jdbc:mysql://localhost:3306/file?&characterEncoding=utf-8&useUnicode=true&useSSL=false",
        userName: "root",
        password: "root",
        nodeNameColName: "name"
      }

    }


  })
</script>
</body>
</html>
